<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue组件</title>
		<script src="../JS/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- type值一般不写成text/javascript，写了话会在网页加载的时候认为是JS执行。 -->
	</head>
	<body>
		<div id="app">
			<login1></login1>
			<!-- 使用组件 -->
		</div>
		
		
		<!-- 第三种 -->
		<script type="x-template" id="mytemp">
			<h1>这是一个全局组件!</h1>
		</script>
		
		
		<script>
			// 第一种
			// //使用Vue.extend定义组件
			// let login = Vue.extend({
			// 	template:'<h1>这是一个全局组件!</h1>'
			// })
			// //注册
			// Vue.component('login1',login)
			// //引号里的是标签名字,后面是自己定义的组件.
			
			
			// 第二种
			// Vue.component('login1',{
			// 	 	template:'<h1>这是一个全局组件!</h1>'
			// })
			
			
			//第三种
			Vue.component('login1',{
			 	 	template:'#mytemp'
			})
			
		    let app = new Vue({
		        el:'#app',
		        data:{
		           
		        }
		    })
		</script>
	</body>
</html>
